import React from 'react';
import ReactEcharts from 'echarts-for-react';

class DynamicChartComponent extends React.Component {
    constructor(props) {
        super(props);
        this.timeTicket = null;
        this.count = 51;

        const option = {
            title: {
                text: 'Hello Echarts-for-react.',
            },
            tooltip: {
                trigger: 'axis',
            },
            legend: {
                data: ['最新成交价', '预购队列'],
            },
            toolbox: {
                show: true,
                feature: {
                    dataView: { readOnly: false },
                    restore: {},
                    saveAsImage: {},
                },
            },
            grid: {
                top: 60,
                left: 30,
                right: 60,
                bottom: 30,
            },
            dataZoom: {
                show: false,
                start: 0,
                end: 100,
            },
            visualMap: {
                show: false,
                min: 0,
                max: 1000,
                color: [
                    '#BE002F',
                    '#F20C00',
                    '#F00056',
                    '#FF2D51',
                    '#FF2121',
                    '#FF4C00',
                    '#FF7500',
                    '#FF8936',
                    '#FFA400',
                    '#F0C239',
                    '#FFF143',
                    '#FAFF72',
                    '#C9DD22',
                    '#AFDD22',
                    '#9ED900',
                    '#00E500',
                    '#0EB83A',
                    '#0AA344',
                    '#0C8918',
                    '#057748',
                    '#177CB0',
                ],
            },
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: true,
                    data: (function() {
                        let now = new Date();
                        let res = [];
                        let len = 50;
                        while (len--) {
                            res.unshift(now.toLocaleTimeString().replace(/^\D*/, ''));
                            now = new Date(now - 2000);
                        }
                        return res;
                    })(),
                },
                {
                    type: 'category',
                    boundaryGap: true,
                    data: (function() {
                        let res = [];
                        let len = 50;
                        while (len--) {
                            res.push(50 - len + 1);
                        }
                        return res;
                    })(),
                },
            ],
            yAxis: [
                {
                    type: 'value',
                    scale: true,
                    name: '价格',
                    max: 20,
                    min: 0,
                    boundaryGap: [0.2, 0.2],
                },
                {
                    type: 'value',
                    scale: true,
                    name: '预购量',
                    max: 1200,
                    min: 0,
                    boundaryGap: [0.2, 0.2],
                },
            ],
            series: [
                {
                    name: '预购队列',
                    type: 'bar',
                    xAxisIndex: 1,
                    yAxisIndex: 1,
                    itemStyle: {
                        normal: {
                            barBorderRadius: 4,
                        },
                    },
                    animationEasing: 'elasticOut',
                    animationDelay(idx) {
                        return idx * 10;
                    },
                    animationDelayUpdate(idx) {
                        return idx * 10;
                    },
                    data: (function() {
                        let res = [];
                        let len = 50;
                        while (len--) {
                            res.push(Math.round(Math.random() * 1000));
                        }
                        return res;
                    })(),
                },
                {
                    name: '最新成交价',
                    type: 'line',
                    data: (function() {
                        let res = [];
                        let len = 0;
                        while (len < 50) {
                            res.push((Math.random() * 10 + 5).toFixed(1) - 0);
                            len++;
                        }
                        return res;
                    })(),
                },
            ],
        };

        this.state = {
            option,
        };

        this.fetchNewDate = this.fetchNewDate.bind(this);
    }

    fetchNewDate() {
        let axisData = new Date().toLocaleTimeString().replace(/^\D*/, '');
        let { option } = this.state;
        option.title.text = `Hello Echarts-for-react.${new Date().getSeconds()}`;
        let data0 = option.series[0].data;
        let data1 = option.series[1].data;
        data0.shift();
        data0.push(Math.round(Math.random() * 1000));
        data1.shift();
        data1.push((Math.random() * 10 + 5).toFixed(1) - 0);

        option.xAxis[0].data.shift();
        option.xAxis[0].data.push(axisData);
        option.xAxis[1].data.shift();
        option.xAxis[1].data.push((this.count += 1));
        this.setState({ option });
    }

    componentDidMount() {
        if (this.timeTicket) {
            clearInterval(this.timeTicket);
        }
        this.timeTicket = setInterval(this.fetchNewDate, 1000);
    }

    componentWillUnmount() {
        if (this.timeTicket) {
            clearInterval(this.timeTicket);
        }
    }

    render() {
        let code = "<ReactEcharts ref='echartsInstance' \n" + '    option={this.state.option} />\n';
        return (
            <div className="examples">
                <div className="parent">
                    <label> use React state to render dynamic chart</label>
                    <ReactEcharts
                        ref="echarts_react"
                        option={this.state.option}
                        style={{ height: 400 }}
                    />
                    <label> code below: use state of react to render dynamic chart</label>
                    <pre>
                        <code>{code}</code>
                    </pre>
                </div>
            </div>
        );
    }
}

export default DynamicChartComponent;
